<template>
  <header class="header">
    <!-- <div class="container">
      <div class="topbar">
        <div class="row">
          <div class="col-md-6 section-left">{{ headerData.welcome }}</div>
          <div class="col-md-6 section-right">
            <div class="section-phone">
              <i class="icon-call-out"></i>
              <a :href="`callto:` + headerData.tel">{{ headerData.tel }}</a>
            </div>
            <div class="section-email">
              <i class="icon-envelope-open"></i>
              <a :href="`mailto:` + headerData.email">{{ headerData.email }}</a>
            </div>
          </div>
        </div>
      </div>
    </div> -->

    <div class="container">
      <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#">
          <img
            :src="require('@/assets/image/welons-logo.png')"
            alt=""
            height="70"
          />
        </a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ms-auto">
            <template v-for="(item, index) in menuData" :key="index">
              <template v-if="item.children">
                <li class="nav-item dropdown" v-if="item.isShow">
                  <a
                    class="nav-link dropdown-toggle"
                    id="navbarDropdown"
                    role="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                  >
                    {{ item.title }}
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <template
                      v-for="(child, index) in item.children"
                      :key="index"
                    >
                      <li>
                        <a
                          class="dropdown-item"
                          @click="jumpLink(child.url)"
                          :title="child.url"
                        >
                          {{ child.title }}
                        </a>
                      </li>
                    </template>
                  </ul>
                </li>
              </template>
              <template v-else>
                <li class="nav-item" v-if="item.isShow">
                  <a
                    class="nav-link"
                    @click="jumpLink(item.url)"
                    :title="item.url"
                  >
                    {{ item.title }}
                  </a>
                </li>
              </template>
            </template>
          </ul>
        </div>
      </nav>
    </div>
  </header>
</template>

<script>
import BaseInfo from "@/datas/BaseInfo.json";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
} from "vue";
export default {
  name: "baseHeader",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();

    const data = reactive({
      headerData: BaseInfo.headerData,
      menuData: BaseInfo.menuData,
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {});
    //
    const methods = {
      jumpLink: (url) => {
        proxy.$router.push({ path: url });
      },
    };
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style lang="scss" scoped>
@media (min-width: 992px) {
  .header {
    .container {
      padding: 0 100px;
    }
  }
}

.header {
  .topbar {
    border-bottom: 1px solid #d9deeb;
    color: #52555f;

    .section-left {
      line-height: 40px;
      font-size: 1.25rem;
    }

    .section-right {
      text-align: right;
    }
  }

  .topbar .section-phone {
    padding: 5px 15px 5px 0;
    border-right: 1px solid #d9deeb;
    font-weight: 600;
  }

  .topbar .section-email {
    padding: 5px 7px 5px 14px;
    font-weight: 600;
  }

  .topbar .section-email,
  .topbar .section-phone {
    display: inline-block;
    font-size: 20px;
  }

  .topbar a:hover {
    color: #8260e3;
  }

  .navbar {
    .navbar-nav {
      li {
        padding: 0px 1rem;
        font-size: 1.25rem;
        font-weight: 600;
        color: #21243b;
        line-height: 36px;

        a.nav-link {
          color: inherit;
        }

        a.nav-link:hover {
          color: #8260e3;
        }
      }

      .dropdown-menu .dropdown-item {
        display: block;
        width: 100%;
        padding: 0.25rem 1rem;
        clear: both;
        font-weight: 400;
        color: #21243b;
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background-color: transparent;
        border: 0;
      }

      .dropdown-menu .dropdown-item:hover {
        color: #8260e3;
      }
    }
  }
}
</style>
